<template>
  <div class="bigBox">
    <el-form label-width="90px">
      <div class="topBox">
        <el-row :gutter="50">
          <el-col :span="8">
            <el-form-item label="司机账号:">
              <el-input v-model="FormData.account" placeholder="请输入司机账号" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机姓名:">
              <el-input v-model="FormData.name" placeholder="请输入司机姓名" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机手机号:">
              <el-input v-model="FormData.phone" placeholder="请输入快递手机号" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属机构:">
              <template>
                <el-select
                  v-model="FormData.agentId"
                  style="width: 100%"
                  clearable
                  placeholder="请选择所属机构"
                >
                  <el-tree
                    node-key="id"
                    :data="treeData"
                    class="add_tree"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :check-on-click-node="true"
                  >
                    <span slot-scope="{ data }" class="custom-tree-node">
                      <el-option
                        style="padding: 0"
                        :label="data.name"
                        :value="data.id"
                      />
                    </span>
                  </el-tree>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="danger" @click="searchBtn">搜索</el-button>
            <el-button @click="resetBtn">重置</el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <div class="contentList">
      <el-table
        :data="driverList"
        border
        style="width: 100%"
      >
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="160"
        />
        <el-table-column
          align="center"
          prop="account"
          label="司机账号"
          width="160"
        />
        <el-table-column
          align="center"
          prop="name"
          label="司机姓名"
          width="160"
        />
        <el-table-column
          align="center"
          prop="mobile"
          label="司机电话"
          width="160"
        />
        <el-table-column
          align="center"
          prop="truck.licensePlate"
          label="关联车辆"
          width="160"
        />
        <el-table-column
          align="center"
          prop="agency.name"
          label="所属机构"
          width="160"
        />
        <el-table-column
          align="center"
          prop="workStatus"
          label="工作状态"
          width="160"
        >
          <template v-slot="{row}">
            <span v-if="row.workStatus===0" class="re0">休息</span>
            <span v-else-if="row.workStatus===1">上班</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="controls"
          label="操作"
          width="200"
        >
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="$router.push(`/manager/driver/${(row.userId)}`)">查看</el-button>
            <el-button type="text" size="small">配置车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import { getDriverList, getInstitutionList } from '@/api/employee/driver'
export default {
  data() {
    return {
      // ---分页器
      params: {
        page: 1, // 页码
        pageSize: 10 // 每页存10条数据
      },
      total: 0, // 数据总数,
      // ----
      // 输入框
      FormData: {
        account: '', // 司机账号
        name: '', // 司机姓名
        phone: '', // 司机电话
        agentId: null // 所属机构
      },

      driverList: [], // 数组列表
      treeData: [], // 树形机构列表
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getDriverList()// 获取司机列表
    this.getInstitutionList() // 获取所属机构 下拉树形列表
  },
  methods: {
    // 每页存多少条数据
    sizeChange(newPageSize) {
      console.log(`每页 ${newPageSize} 条`)
      this.params.pageSize = newPageSize // 赋值存放数据数量
      this.getDriverList() // 重新调用渲染列表
    },
    // 切换页码
    pageChange(newPage) {
      console.log(`当前页: ${newPage}`)
      this.params.page = newPage // 赋值新页码
      this.getDriverList() // 重新渲染列表
    },
    // 获取司机列表
    async getDriverList() {
      const res = await getDriverList(this.params) // 携带参数
      console.log(res)
      this.driverList = res.data.items // 赋值司机列表
      this.total = +res.data.counts // 赋值总数量  +做隐式转换
    },

    // 获取搜索那里的所属机构下拉列表
    async getInstitutionList() {
      const res = await getInstitutionList()
      // console.log(JSON.parse(res.data))
      this.treeData = JSON.parse(res.data) //  获取回来数据是字符串,需要转
    },

    // 搜索按钮
    async searchBtn() {
      const res = await getDriverList({ ...this.params, ...this.FormData }) // 携带参数,拿参数去请求数据列表
      this.driverList = res.data.items // 重新赋值
      this.params.page = 1 // 搜索后把页码切回第一页
    },

    // 重置按钮
    resetBtn() {
      this.FormData.account = ''
      this.FormData.name = ''
      this.FormData.phone = ''
      this.FormData.agentId = null
    }
    // 查看按钮
    // view(id) {
    //   console.log(id)
    // }

    // resetBtn
  }
}
</script>
<style lang="scss" scpped>
.bigBox{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 15px 15px 15px;
  background-color:#f3f4f7;
  .topBox{
    margin: 0 15px 15px 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top:30px ;
    background-color: #fff;
  }
  .contentList{
    margin: 0 15px 15px 15px;
    background-color: #fff;
  }
  .block{
    // align-items: center;
    text-align: center;
    background-color: #fff;
  }
}
.form-box{
  background-color: #ffffff;

  padding:20px 30px;

}
.re0{
  color: red;
}
</style>
